<template>
    <van-nav-bar :title="videoData.vname" left-arrow text-light @click-left="onClickLeft" />
    <div class="videosp">
        <!-- <video width="100%" height="240" controls autoplay="autoplay">
            <source :src="videoData.videoplay" type="video/mp4">
        </video> -->
        <video :src="videoData.videoplay" width="100%" height="240" controls autoplay="autoplay">
        </video>
        <div style="margin-top: 10px; font-size: 15px; margin-bottom: 10px; padding-left: 5px;">
           {{ videoData.vname }}
        </div>
        <van-row>
            <van-col span="5">
                <div style="font-size: 10px; color: #979AA8; text-align: center; margin-top: 5px;">
                   {{videoData.username }}
                </div>

            </van-col>
            <van-col span="4">
                <div style="font-size: 10px; color: #979AA8; margin-top: 5px;">
                    {{videoData.count}}万次播放
                </div>
            </van-col>
            <van-col span="15">
                <div style="font-size: 10px; color: #979AA8; margin-top: 5px;">
                    {{videoData.createtime }}
                </div>
            </van-col>
        </van-row>
    </div>

</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();  // 获取路由信息对象  接收路由上携带的参数的
import { VideoApi } from '../api';

// 数据对象  响应对象 用来存储视频数据信息 和ref 区别 就是  reactive用解决复杂的对象
const videoData = reactive({
    id: '',
    videoplay: '',
    vname: '',
    createtime: '',
    count: '',
    username: ''
})



onMounted(() => {
    console.log(route.query.id);
    videoData.id= route.query.id
    CallVideoApi()
})

const CallVideoApi =()=>{
    VideoApi.select.call({id:videoData.id}).then(res=>{
        console.log(res[0]);
        videoData.vname = res[0].vname
        videoData.videoplay = res[0].videoplay
        videoData.createtime = res[0].createtime
        videoData.count = res[0].count
        videoData.username = res[0].username

        
    })
}


const onClickLeft = () => history.back();
</script>

<style scoped>
.van-nav-bar {
    background: linear-gradient(90deg, #fe9300 0%, #e2ad79 100%);
}
</style>